<template>
  <div style="padding: 0 10px">
    <van-pagination
        prev-text="上一条"
        next-text="下一条"
        class="sub-table-row-editor-pagination"
        v-model="innerRowIndex"
        :page-count="dataSource.length" mode="simple"/>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';
import {computed} from 'vue';

defineOptions({name: 'SubTableRowEditorPagination'});

const props = defineProps({
  formModel: createProps(Object, () => undefined),
  rowIndex: createProps(Number),
  dataSource: createProps(Array),
});
const emits = defineEmits(['update:rowIndex', 'update:formModel']);

const innerRowIndex = computed({
  get() {
    return props.rowIndex + 1;
  },
  set(val) {
    emits('update:rowIndex', val - 1);
    emits('update:formModel', props.dataSource[val - 1]);
  }
});
</script>
<style lang="less">
.sub-table-row-editor-pagination .van-pagination__item:active {
  color: var(--van-white);
  background: var(--van-gray-7);
}

.sub-table-row-editor-pagination .van-pagination__item {
  background: none;
}
</style>